
<div style="POSITION: relative" id="content">
  <h3>easyUI datagrid在页脚显示摘要信息</h3>
  <div id="article_content" class="article_content">
	<p>在这个教程中,我们将告诉你如何显示摘要信息行在datagrid页脚.</p>
<p><img src="documentation/images/1344653098_9632.png" alt=""><br>
</p>

<p>显示页脚行,你应该设置<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">showFooter 属性为true,然后准备页脚行定义在datagrid的数据,以下是示例数据.</span></p>
<p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span><pre name="code" class="javascript">{&quot;total&quot;:1,&quot;rows&quot;:[{&quot;id&quot;:1,&quot;name&quot;:&quot;Chai&quot;,&quot;price&quot;:18.00}],&quot;footer&quot;:[{&quot;name&quot;:&quot;Total&quot;,&quot;price&quot;:18.00}]}  </pre></p>

<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
创建DataGrid</h4>
<pre name="code" class="html">&lt;table id=&quot;tt&quot; title=&quot;DataGrid&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:400px;height:250px&quot;  
        url=&quot;data/datagrid17_data.json&quot;  
        fitColumns=&quot;true&quot; rownumbers=&quot;true&quot; showFooter=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;name&quot; width=&quot;80&quot;&gt;Product Name&lt;/th&gt;  
            &lt;th field=&quot;price&quot; width=&quot;40&quot; align=&quot;right&quot;&gt;Unit Price&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>页脚行和显示数据行一样,所以你可以显示不止一个摘要信息在页脚.
<p></p>

<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
下载 EasyUI 示例:</h4>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px">
<a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid17-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>

  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>